<template>
	<Dialog v-model="dialogVisible" title="批量配置" width="800px">
		<el-form ref="configureRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="210px">
			<el-form-item label="房屋地址">
				{{ houseData.name }}
			</el-form-item>
			<el-form-item label="银联账户(包括房租/电表/水表)" prop="matCodeId">
				<el-input v-model="formData.matConfigRemark_" :readonly="true">
					<template #append>
						<el-button icon="el-icon-search" @click="openMat">选择</el-button>
						<el-button type="success" @click="clearMat">清空</el-button>
					</template>
				</el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" @click="submitForm">确 定</el-button>
			<el-button @click="dialogVisible = false">取 消</el-button>
		</template>
	</Dialog>
	<OwnMeterConfigSelect ref="ownMeterConfigSelectRef" @confirm-own-meter-config="confirmOwnMeterConfig" />
</template>
<script lang="ts" setup>
	import * as HouseRoomApi from '@/api/zwsj/houseRoom'
	import OwnMeterConfigSelect from '@/views/zwsj/common/OwnMeterConfigSelect.vue'

	defineOptions({ name: 'RoomForm' })

	const { t } = useI18n() // 国际化
	const message = useMessage() // 消息弹窗
	const houseData = ref({
		id: undefined,
		name: undefined,
		commId: undefined,
	})
	const dialogVisible = ref(false) // 弹窗的是否展示
	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	const formData = ref({
		id: undefined,
		matConfigRemark_: undefined, // 银联账户备注
		matCodeId: undefined,
	})
	const formRules = reactive({
		commId: [{ required: true, message: '社区不能为空', trigger: 'blur' }],
		name: [{ required: true, message: '房间名称不能为空', trigger: 'blur' }],
		shortName: [{ required: true, message: '房间简称不能为空', trigger: 'blur' }],
		sort: [{ required: true, message: '序号不能为空', trigger: 'blur' }],
	})
	const configureRef = ref() // 表单 Ref
	/** 打开弹窗 */
	const open = async (item?: object) => {
		dialogVisible.value = true
		resetForm()
		formData.value.id = item.id
		houseData.value = item
	}

	defineExpose({ open }) // 提供 open 方法，用于打开弹窗

	/** 提交表单 */
	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	const submitForm = async () => {
		// 校验表单
		if (!configureRef) return
		const valid = await configureRef.value.validate()
		if (!valid) return
		// 提交请求
		formLoading.value = true
		try {
			const data = formData.value as unknown as HouseRoomApi.configureRoomVo
			await HouseRoomApi.postBatchConfigMat(data)
			message.success(t('common.updateSuccess'))
			dialogVisible.value = false
			// 发送操作成功的事件
			emit('success')
		} finally {
			formLoading.value = false
		}
	}

	/** 重置表单 */
	const resetForm = () => {
		formData.value = {
			id: undefined,
			matConfigRemark_: undefined,
			matCodeId: undefined,
		}
		configureRef.value?.resetFields()
	}

	// 选择分账功能
	const ownMeterConfigSelectRef = ref()
	const openMat = async () => {
		ownMeterConfigSelectRef.value.open()
	}
	const confirmOwnMeterConfig = async ({ matCode }) => {
		formData.value.matConfigRemark_ = matCode.configRemark
		formData.value.matCodeId = matCode.id
	}
	const clearMat = async () => {
		formData.value.matConfigRemark_ = undefined
		formData.value.matCodeId = undefined
	}
</script>
